<template>
  <view class="home-page">
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 捞取按钮 -->
      <button 
        class="lure-button" 
        :disabled="!canCatch || isLuring"
        @click="handleLureBottle"
      >
        {{ isLuring ? '捞取中...' : '捞一个瓶子' }}
      </button>
      
      <!-- 剩余次数提示 -->
      <view class="quota-info">
        今日剩余捞取次数: {{ userStore.remainingCatchCount }}
      </view>
    </view>

    <!-- 悬浮按钮 -->
    <view class="fab-container">
      <view class="fab" @click="handleCreateBottle">
        <view class="bottle-icon"></view>
        <view class="fab-text">扔一个</view>
      </view>
    </view>

    <!-- 个人中心弹窗 -->
    <view 
      class="profile-modal-overlay" 
      :class="{ visible: showProfileModal }"
      @click="handleModalOverlayClick"
    >
      <view class="profile-modal">
        <view class="profile-avatar">{{ userStore.displayAvatar }}</view>
        <view class="profile-nickname">{{ userStore.displayName }}</view>
        <button class="logout-button" @click="handleLogout">注销</button>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/user'
import { useBottleStore } from '@/store/bottle'

export default {
  name: 'HomePage',
  data() {
    return {
      showProfileModal: false,
      isLuring: false
    }
  },
  computed: {
    userStore() {
      return useUserStore()
    },
    
    bottleStore() {
      return useBottleStore()
    },
    
    /**
     * 检查是否可以捞取瓶子
     */
    canCatch() {
      return this.userStore.canCatchBottle
    }
  },
  
  onLoad() {
    console.log('心声海洋页面加载')
    this.initPage()
  },
  
  onShow() {
    console.log('心声海洋页面显示')
    // 检查登录状态
    this.checkLoginStatus()
  },
  
  // 自定义tabBar相关
  onTabItemTap(item) {
    console.log('Tab点击:', item)
    if (item.index === 2) { // 个人中心
      this.showProfileModal = true
    }
  },
  
  methods: {
    /**
     * 初始化页面
     */
    initPage() {
      // 加载用户信息
      this.userStore.loadUserFromStorage()
      
      // 加载瓶子数据
      this.bottleStore.loadFromStorage()
      
      // 检查登录状态
      this.checkLoginStatus()
    },
    
    /**
     * 检查登录状态
     */
    checkLoginStatus() {
      if (!this.userStore.isLoggedIn) {
        // 未登录，跳转到登录页面
        uni.reLaunch({
          url: '/pages/login/index'
        })
      }
    },
    
    /**
     * 处理捞取瓶子
     */
    async handleLureBottle() {
      if (!this.canCatch) {
        uni.showToast({
          title: '今日捞取次数已用完',
          icon: 'none'
        })
        return
      }
      
      this.isLuring = true
      
      try {
        const result = await this.bottleStore.catchBottle()
        
        if (result.success) {
          // 增加捞取次数
          this.userStore.incrementCatchCount()
          
          // 跳转到瓶子详情页
          uni.navigateTo({
            url: '/pages/bottle-detail/index'
          })
        } else {
          uni.showToast({
            title: result.message || '捞取失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('捞取瓶子失败:', error)
        uni.showToast({
          title: '捞取失败',
          icon: 'error'
        })
      } finally {
        this.isLuring = false
      }
    },
    
    /**
     * 处理创建瓶子
     */
    handleCreateBottle() {
      if (!this.userStore.canSendBottle) {
        uni.showToast({
          title: '今日投递次数已用完',
          icon: 'none'
        })
        return
      }
      
      uni.navigateTo({
        url: '/pages/create-bottle/index'
      })
    },
    
    /**
     * 处理弹窗覆盖层点击
     */
    handleModalOverlayClick(event) {
      // 如果点击的是覆盖层本身，关闭弹窗
      if (event.target === event.currentTarget) {
        this.showProfileModal = false
      }
    },
    
    /**
     * 处理注销
     */
    async handleLogout() {
      uni.showModal({
        title: '确认注销',
        content: '确定要注销当前账号吗？',
        success: async (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '正在注销...' })
            
            try {
              const result = await this.userStore.logout()
              
              if (result.success) {
                // 清空瓶子数据
                this.bottleStore.clearAllBottles()
                
                uni.showToast({
                  title: '注销成功',
                  icon: 'success'
                })
                
                // 跳转到登录页面
                setTimeout(() => {
                  uni.reLaunch({
                    url: '/pages/login/index'
                  })
                }, 1000)
              } else {
                uni.showToast({
                  title: result.message || '注销失败',
                  icon: 'error'
                })
              }
            } catch (error) {
              console.error('注销失败:', error)
              uni.showToast({
                title: '注销失败',
                icon: 'error'
              })
            } finally {
              uni.hideLoading()
              this.showProfileModal = false
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
  position: relative;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  position: relative;
  z-index: 10;
}

.lure-button {
  padding: 30rpx 60rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: var(--primary-bg);
  background-color: var(--accent-gold);
  border: none;
  border-radius: 100rpx;
  transition: all 0.3s ease;
  box-shadow: 0 10rpx 40rpx rgba(255, 215, 0, 0.4);
  
  &:hover {
    transform: translateY(-6rpx);
    box-shadow: 0 16rpx 50rpx rgba(255, 215, 0, 0.5);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  &:disabled {
    background-color: var(--text-dark);
    color: #aaa;
    cursor: not-allowed;
  }
}

.quota-info {
  margin-top: 40rpx;
  color: var(--text-dark);
  font-size: 24rpx;
}

.fab-container {
  position: fixed;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}

.fab {
  width: 140rpx;
  height: 140rpx;
  background-color: var(--accent-gold);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10rpx 30rpx rgba(255, 215, 0, 0.4);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  
  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.6);
  }
  
  .bottle-icon {
    width: 56rpx;
    height: 56rpx;
    border: 4rpx solid var(--primary-bg);
    border-radius: 45% 45% 30rpx 30rpx;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: -12rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 24rpx;
      height: 8rpx;
      background-color: var(--primary-bg);
      border-radius: 4rpx;
    }
  }
  
  .fab-text {
    color: var(--primary-bg);
    font-weight: 500;
    font-size: 28rpx;
    margin-top: 4rpx;
  }
}

.profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  
  &.visible {
    opacity: 1;
    pointer-events: all;
  }
}

.profile-modal {
  width: 80%;
  max-width: 500rpx;
  background-color: var(--secondary-bg);
  border-radius: 40rpx;
  padding: 60rpx;
  text-align: center;
  color: var(--text-light);
  transform: scale(0.95);
  transition: transform 0.3s ease;
  
  .profile-modal-overlay.visible & {
    transform: scale(1);
  }
  
  .profile-avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    background-color: var(--lighter-bg);
    margin: 0 auto 30rpx;
    font-size: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .profile-nickname {
    font-size: 36rpx;
    font-weight: 500;
    margin-bottom: 60rpx;
  }
  
  .logout-button {
    padding: 24rpx 80rpx;
    background-color: var(--accent-gold);
    color: var(--primary-bg);
    border: none;
    border-radius: 50rpx;
    font-weight: 500;
    font-size: 32rpx;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
  }
}
</style> 